<template>

  <!--<div :class="pattern === '制冷'?'main hot':'main cold' ">-->
  <div class="main">


    <mt-swipe  id='swipeC' :auto="0" :show-indicators="true" @change="handleChange">

      <mt-swipe-item >

        <div ref="wrapper" :class="status === 0?'risk-list-page mark':'risk-list-page' " :style="{height: contentH + 'px'}">
          <!--<div class="risk-list-page mark" >-->

          <Loadmore style="height: 100%" :top-method="notificationListLoadTop"  ref="loadmore" :autoFill="false" :bottomDistance="30">

            <div slot="top" class="mint-loadmore-top">
              <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
              <span v-show="topStatus === 'loading'">Loading...</span>
            </div>

          <div :class="pattern === '制冷'?'hot':'cold' ">
          <!--<div>-->
            <div class="topHeader" >
              <div>热泵型号{{model}}</div>
              <i class="iconfont icon-more" @click="menuActive">

              </i>
              <i class="iconfont icon-tianjia" @click="btnMsg"></i>
              <ul class="menu" @click="btnMsg" v-show="menu===1">
                <li>添加设备</li>
                <li>删除设备</li>
                <li>历史温度</li>
                <li>设备信息</li>
                <li>高级设置</li>
                <div class="arrow"></div>
              </ul>
            </div>
            <div v-show="status===0" class="popContainer">
              <div class="open" @click="open(0)" v-show="status===0">
              </div>
            </div>

            <div class="temperature">
              <div :class="fontS === 0?'contTem coldBack':'contTem hotBack' " >
                <div :class="fontS === 0?'down tem hotColDown':'down tem coldColDown' " @click="down(0)"><p>-</p></div>
                <div :class="fontS === 0?'temperatureNum hotCol':'temperatureNum coldCol' ">23 <p>℃</p> <span>设置温度: {{number}}℃ </span><i :class="fontS === 0?'coldI':'hotI'"@click="btnMsg" >智能策略</i></div>
                <div :class="fontS === 0?'up tem hotColDown':'up tem coldColDown' " @click="up(0)"><p>+</p></div>
                <img class="logo" src="../assets/img/logoA.png">
              </div>


            </div>
            <div style="width : 100%; height: 200px;overflow: hidden">

            <div id="myChart" style="width : 125%; height: 200px;margin-left: -20px;overflow: hidden"></div>
            </div>
            <ul class="bottomButton">
              <li @click="close(0)">
                <div><img :src="urlColse"></div>
                <p>关机</p>
              </li>
              <li @click="patternChange(0)">
                <div>
                  <img :src="urlChange">
                </div>
                <p>模式<span><br>{{pattern}}</span></p>
              </li>
              <li @click="btnMsg">
                <div>
                  <img :src="senior">
                </div>
                <p>高级设置</p>
              </li>
            </ul>
          </div>

          </Loadmore>


        </div>

      </mt-swipe-item>

      <mt-swipe-item>
        <div ref="wrapper" :class="statusTwo === 0?'risk-list-page mark':'risk-list-page' " :style="{height: contentH + 'px'}">
          <Loadmore style="height: 100%" :top-method="notificationListLoadTop"  ref="loadmore" :autoFill="false" :bottomDistance="30">
          <!--<div class="risk-list-page mark" >-->
            <div slot="top" class="mint-loadmore-top">
              <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
              <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
            <div :class="pattern2 === '制冷'?'hot':'cold' ">
              <div class="topHeader" >
                <div>热泵型号{{model}}</div>
                <i class="iconfont icon-more" @click="menuActive">

                </i>
                <i class="iconfont icon-tianjia" @click="btnMsg"></i>
                <ul class="menu" @click="btnMsg" v-show="menu===1">
                  <li>添加设备</li>
                  <li>删除设备</li>
                  <li>历史温度</li>
                  <li>设备信息</li>
                  <li>高级设置</li>
                  <div class="arrow"></div>
                </ul>
              </div>
              <div v-show="statusTwo===0" class="popContainer">
              </div>
              <div class="open" @click="open(1)" v-show="statusTwo===0">
              </div>
              <!--<div class="topHeader">-->
                <!--<div>热泵型号XXXX</div>-->
                <!--<i class="iconfont icon-more" @click="menuActive">-->

                <!--</i>-->
                <!--<ul @click="btnMsg" class="menu" v-show="menu===1">-->
                  <!--<li>添加设备</li>-->
                  <!--<li>删除设备</li>-->
                  <!--<li>历史温度</li>-->
                  <!--<li>设备信息</li>-->
                  <!--<div class="arrow"></div>-->
                <!--</ul>-->
                <div class="failed" ref="failed">
                  <p>故障</p>
                  <p>压缩机损坏(故障码:0001)</p>
                  <p @click="btnMsg">立即报修</p>
                </div>
              <!--</div>-->
              <div class="temperature">
                <div :class="fontS2 === 0?'contTem coldBack':'contTem hotBack' ">
                  <div :class="fontS2 === 0?'down tem hotColDown':'down tem coldColDown' " @click="down(1)"><p>-</p></div>
                  <div :class="fontS2 === 0?'temperatureNum hotCol':'temperatureNum coldCol' ">23 <p>℃</p> <span>设置温度: {{number2}}℃ </span><i :class="fontS2 === 0?'coldI':'hotI'" @click="btnMsg">智能策略</i></div>
                  <div :class="fontS2 === 0?'up tem hotColDown':'up tem coldColDown' " @click="up(1)"><p>+</p></div>
                  <img class="logo" src="../assets/img/logoA.png">
                </div>


              </div>
              <div style="width : 100%; height: 200px;overflow: hidden">
                <div id="myChart2" style="width : 125%; height: 200px;margin-left: -20px"></div>
              </div>

              <ul class="bottomButton">
                <li @click="close(1)">
                  <div><img :src="urlColse2"></div>
                  <p>关机</p>
                </li>
                <li @click="patternChange(1)">
                  <div>
                    <img :src="urlChange2">
                  </div>
                  <p>模式<br><span>{{pattern2}}</span></p>
                </li>
                <li @click="btnMsg">
                  <div>
                    <img :src="senior2">
                  </div>
                  <p>高级设置</p>
                </li>
              </ul>
            </div>
          </Loadmore>
        </div>

      </mt-swipe-item>

    </mt-swipe>
  <footer-tab :bottom-active="bottomActive"></footer-tab>
  </div>

</template>

<script>
  import headerTab from '../components/header-tab.vue'
  import footerTab from '../components/footer-tab.vue'
  import msgCards from '../components/msg-cards.vue'
  import {Loadmore, Toast} from 'mint-ui'
  //    import MsgService from '../assets/js/fetch_service/msg.js'
  export default{
    components: {
      headerTab,
      msgCards,
      footerTab,
      Loadmore
    },
    data () {
      return {
        urlColse: require('../assets/img/urlClose.png'),
        urlChange: require('../assets/img/urlChange.png'),
        senior: require('../assets/img/urlSenior.png'),
        urlColse2: require('../assets/img/urlClose.png'),
        urlChange2: require('../assets/img/urlChange.png'),
        senior2: require('../assets/img/urlSenior.png'),
        contentH: 0,
        topStatus: 'loading',
        menu: 0,
        model: '0001',
        status: 1,
        statusTwo: 1,
        pattern: '制冷',
        pattern2: '制冷',
        bottomActive: 0,
        loadTabs: false,
        number: 28,
        number2: 28,
        fontS: 0,
        fontS2: 0,
        totalCount: 0,
        areaStyleChange: 'rgb(90,180,252)',
        areaStyleChange2: 'rgb(90,180,252)',
        lineStyleChange: 'rgb(90,180,252)',
        lineStyleChange2: 'rgb(90,180,252)'
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.contentH = document.documentElement.clientHeight -
          this.$refs.wrapper.getBoundingClientRect().top
      })
      this.drawLine()
    },
    methods: {
      notificationListLoadTop () {
        this.current = 1
        this.$refs.loadmore.onTopLoaded()
      },
      handleChange () {
        this.model === '0001' ? this.model = '0002' : this.model = '0001'
        this.drawLineSwipe()
      },
      patternChange (index) {
        // e.preventDefault()
        this.$indicator.open()
        setTimeout(() => this.$indicator.close(), 500)
        if (index === 0) {
          this.pattern === '制冷' ? this.pattern = '制热' : this.pattern = '制冷'
          this.fontS === 0 ? this.fontS = 1 : this.fontS = 0
          this.areaStyleChange === 'rgb(90,180,252)' ? this.areaStyleChange = 'rgb(253,180,143)' : this.areaStyleChange = 'rgb(90,180,252)'
          this.lineStyleChange === 'rgb(90,180,252)' ? this.lineStyleChange = '#FCA377' : this.lineStyleChange = 'rgb(90,180,252)'
          this.urlColse === require('../assets/img/urlClose.png') ? this.urlColse = require('../assets/img/urlClose2.png') : this.urlColse = require('../assets/img/urlClose.png')
          this.urlChange === require('../assets/img/urlChange.png') ? this.urlChange = require('../assets/img/urlChange2.png') : this.urlChange = require('../assets/img/urlChange.png')
          this.senior === require('../assets/img/urlSenior.png') ? this.senior = require('../assets/img/urlSenior2.png') : this.senior = require('../assets/img/urlSenior.png')
          this.drawLine()
          this.drawLineSwipe()
        } else {
          this.pattern2 === '制冷' ? this.pattern2 = '制热' : this.pattern2 = '制冷'
          this.fontS2 === 0 ? this.fontS2 = 1 : this.fontS2 = 0
          this.areaStyleChange2 === 'rgb(90,180,252)' ? this.areaStyleChange2 = 'rgb(253,180,143)' : this.areaStyleChange2 = 'rgb(90,180,252)'
          this.lineStyleChange2 === 'rgb(90,180,252)' ? this.lineStyleChange2 = '#FCA377' : this.lineStyleChange2 = 'rgb(90,180,252)'
          this.urlColse2 === require('../assets/img/urlClose.png') ? this.urlColse2 = require('../assets/img/urlClose2.png') : this.urlColse2 = require('../assets/img/urlClose.png')
          this.urlChange2 === require('../assets/img/urlChange.png') ? this.urlChange2 = require('../assets/img/urlChange2.png') : this.urlChange2 = require('../assets/img/urlChange.png')
          this.senior2 === require('../assets/img/urlSenior.png') ? this.senior2 = require('../assets/img/urlSenior2.png') : this.senior2 = require('../assets/img/urlSenior.png')
          this.drawLine()
          this.drawLineSwipe()
        }
      },
      drawLine () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#B5E9FF',
                opacity: 0.5,
                width: 2
              },
              animation: false
            }
          },
          xAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                color: '#B5E9FF'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#B5E9FF'
              }
            },
            axisTick: {show: false},
            boundaryGap: false,
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一']
          },
          yAxis: {
            axisLine: {
              lineStyle: {
                color: '#B5E9FF'
              }
            },
            axisTick: {show: false},
            axisLabel: {
              show: true,
              textStyle: {
                color: '#B5E9FF'
              }
            },
            type: 'value',
            splitLine: {
              show: false
            }
          },
          series: [{
            name: '温度',
            showSymbol: false,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: this.lineStyleChange
                }
              }
            },
            data: [4, 4, 5, 4, 6, 5, 4, 3],
            type: 'line',
            areaStyle: {
              color: this.areaStyleChange
            }
          }]
        })
      },
      drawLineSwipe () {
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: '#B5E9FF',
                opacity: 0.5,
                width: 2
              },
              animation: false
            }
          },
          xAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                color: '#B5E9FF'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#B5E9FF'
              }
            },
            axisTick: {show: false},
            boundaryGap: false,
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '周一']
          },
          yAxis: {
            axisLine: {
              lineStyle: {
                color: '#B5E9FF'
              }
            },
            axisTick: {show: false},
            axisLabel: {
              show: true,
              textStyle: {
                color: '#B5E9FF'
              }
            },
            type: 'value',
            splitLine: {
              show: false
            }
          },
          series: [{
            name: '温度',
            showSymbol: false,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                lineStyle: {
                  color: this.lineStyleChange2
                }
              }
            },
            data: [4, 4, 5, 4, 6, 5, 4, 3],
            type: 'line',
            areaStyle: {
              color: this.areaStyleChange2
            }
          }]
        })
      },
      menuActive () {
        if (this.menu === 0) {
          this.menu = 1
          this.$refs.failed.style.zIndex = 1
        } else {
          this.menu = 0
          this.$refs.failed.style.zIndex = 11
        }
      },
      open (index) {
        if (index === 0) {
          this.$indicator.open()
          setTimeout(() => this.$indicator.close(), 500)
          this.status === 0 ? this.status = 1 : this.status = 0
        } else {
          this.$indicator.open()
          setTimeout(() => this.$indicator.close(), 500)
          this.statusTwo === 0 ? this.statusTwo = 1 : this.statusTwo = 0
        }
      },
      close (index) {
        if (index === 0) {
          this.status = 0
        } else {
          this.statusTwo = 0
        }
      },
      up (index) {
        index === 0 ? this.number++ : this.number2++
      },
      down (index) {
        index === 0 ? this.number-- : this.number2--
      },
      btnMsg () {
        Toast({
          message: '当前版本不可执行此操作，请联系4006-506-803开通正式版本',
          position: 'middle',
          duration: 1000
        })
      }
    }
  }
</script>

<style scoped lang="scss">
 .popContainer{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 10;
  }
.main{
  height: 100%;
  width: 100%;
  touch-action: none;
}
  .open{
    background: url(../assets/img/open.png) no-repeat;
    background-size: 100%;
    position: absolute;
    width: 98px;
    height: 98px;
    top: 45%;
    left: 50%;
    margin-left: -49px;
    margin-top: -49px;
    z-index: 998;
  }
  .mark{
    /*position:fixed;*/
    /*opacity:.2;*/
    /*width:100%;*/
    /*height:100%;*/
    /*z-index:999;*/
    /*pointer-events: none; //不能操作*/
  }

  .icon-more{
    z-index: 999;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 5px;
    color: white;
    text-align: right;
  }

 .icon-tianjia{
   z-index: 999;
   font-size: 20px;
   position: absolute;
   left: 10px;
   top: 5px;
   color: white;
   text-align: right;
 }
  .temperature{
    display: flex;
    /*position: absolute;*/
    /*top: 40%;*/
    /*height: 230px;*/
    width: 100%;
    .contTem{
      width: 204px;
      height: 204px;
      position: relative;
      margin: 0 auto;
      margin-top: 30px;
      margin-bottom: -30px;
      .logo{
        position: absolute;
        top: -10%;
        left: -27%;
        width: 40px;
        height: 40px;
      }
      .down{
        width: 28px;
        height: 28px;
        position: absolute;
        top: 66%;
        left: -17%;
        display: flex;
        justify-items: center;
        align-items: center;
        text-align: center;
        p{
          flex: 1;
          font-size: 18px;
        }
      }
      .up{
        width: 28px;
        height: 28px;
        position: absolute;
        top: 66%;
        left: 105%;
        display: flex;
        justify-items: center;
        align-items: center;
        text-align: center;
        p{
          flex: 1;
          font-size: 18px;
        }
      }
      .temperatureNum{
        width: 96px;
        height: 112px;
        position: absolute;
        font-size: 80px;
        top: 40%;
        left: 50%;
        margin-top: -56px;
        margin-left: -48px;
        text-align: center;
        span{
          position: absolute;
          width: 100%;
          font-size: 14px;
          top: 99%;
          left: 0;
        }
        p{
          position: absolute;
          font-size: 18px;
          bottom: 17%;
          left: 96%;
        }
        i{
          height: 30px;
          line-height: 30px;
          font-style:normal;
          width: 100%;
          position: absolute;
          font-size: 12px;
          bottom: -44%;
          left: 0;
        }
      }
    }

    .tem{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      text-align: center;
      line-height: 28px;
      font-size: 25px;
      color: white;
    }
  }
.coldI{
  &:after{
    position: absolute;
    right: 8px;
    bottom: 11px;
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #3B8BFB;
  }
}
.hotI{
  &:after{
    position: absolute;
    right: 8px;
    bottom: 11px;
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(251,153,104,1);
  }
}
  .coldBack{
    background:url(../assets/img/home4.png) no-repeat;
    background-size: 100%;
  }
  .hotBack{
    background:url(../assets/img/home3.png) no-repeat;
    background-size: 100%;
  }
  .hotCol{
    color: #3B8BFB;
  }
  .coldCol{
    color: rgba(251,153,104,1)
  }
 .hotColDown{
  background: #3B8BFB;
}
.coldColDown{
  background: rgba(251,153,104,1);
}
  .hot{
    background:url(../assets/img/home1.png) fixed no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
  }
  .cold{
    background:url(../assets/img/home2.png) fixed no-repeat;
    background-size: 100%;
    height: 100%;
    width: 100%;
  }
.failed{
  padding: 20px;
  text-align: right;
  position: absolute;
  right: 0;
  font-size: 12px;
  color: white;
  z-index: 11;
  p{
    &:last-child{
      float: right;
      width: 54px;
      text-align: center;
      background: white;
      border-radius: 10px;
      color: #FF0000;
    }
  }

}
.topHeader{
  flex: 1;
  justify-content: center;
  position: relative;
  align-items: center;
  display: flex;
  height: 45px;
  font-size: 15px;
  color: white;
  z-index: 11;
  .menu{
    position: absolute;
    top: 95%;
    right: 1%;
    width: 104px;
    font-size:14px;
    background: white;
    color:rgba(112,118,129,1);
    text-align: center;
    border-radius: 5%;
    z-index: 9999;
    li {
      padding: 4px;
    }
    .arrow {
      position:absolute;
      top:-8px;
      right:15px; /* 圆角的位置需要细心调试哦 */
      width:0;
      height:0;
      font-size:0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 10px solid #fff;
    }
  }
  .mint-header-button{
    .mint-button-icon{
      font-size: 45px;
    }
  }

}
  .risk-list-page{
    height: 100%;
    width: 100%;

    .topHeader2{
      margin-top: 45px;
      height: 45px;
      font-size: 14px;
    }
    .bottomButton{
      display: flex;
      width: 100%;
      li{
        border-radius:10px;
        display: flex;
        height: 110px;
        flex-direction: column;
        margin: 13px;
        background: white;
        flex: 1;
        font-size: 14px;
        width: 100px;
        color: #333333;
        justify-items: center;
        align-items: center;
        box-shadow:0 0 15px 0 rgba(153,153,153,0.5);
        z-index: 2;
        div {
          display: flex;
          width: 34px;
          height: 34px;
          justify-items: center;
          align-items: center;
          flex: 2;
          img{
            width: 34px;
            height: 34px;
          }
        }
        p{
          justify-items: center;
          align-items: center;
          flex: 2;
          width: 100%;
          text-align: center;
          span{
            font-size: 12px;
            text-align: center;
            justify-items: center;
            align-items: center;
            color: #999999;
          }
        }
      }
    }
  }
</style>
